/**
 * .context bar
 */
.context-bar {
	@bar-height: 47px;
	padding: 0 @body-padding;
	line-height: @bar-height;
	background: @brand-background-color-d1;
	color: white;
	height: @bar-height;
	user-select: none;
	-webkit-user-select: none;
	.clearfix();
	
	&__back {
		font-size: 16px;
		color: #A3ADB9;
		margin-right: 20px;
		cursor: pointer;
	}

	&__name {
		display: inline-block;
		font-size: 16px;
		font-weight: bold;
		>i {
			font-size: 18px;
			margin-right: 4px;
			color: @brand-primary;
		}
	}
	&__spliter {
	    display: inline-block;
		position: relative;
		width: 1px;
		height: @bar-height;
		margin: 0 20px;
		top: -3px;
		vertical-align: middle;
		background: @brand-background-color-d3;
	}
	&__right-button-group {
		.input-group.search{
			background: @brand-background-color-d1;
			border-radius: 30px;
			position: relative;
			border: solid 1px @brand-background-color-d3;
			display: inline-block;
			margin-right: 20px;
			line-height: 30px;
		    transition: background .3s ease-in-out;
		    -ms-transition: background .3s ease-in-out;
		    &:hover {
		    	background: white;
		    }
			input {
				box-sizing: content-box;
				height: 100%;
				line-height: 1;
				padding: 0 28px 0 18px;
				background: none;
				outline: none;
				border: none;
				box-shadow: none;
				font-size: 12px;
				color: @brand-background-color-d3;
				&::-webkit-input-placeholder {
					color: @brand-background-color-d2;
				}
				&::-ms-input-placeholder {
					color: @brand-background-color-d2;
				}
				&::-moz-input-placeholder {
					color: @brand-background-color-d2;
				}
			}
			i {
			    position: absolute;
			    right: 8px;
			    top: 10px;
			    font-size: 14px;
			    color:  @brand-background-color-d3;
			}
		}
	}
	&__group {
		display: inline-block;
	}
	&__button-group {
		position: relative;
		bottom: 3px;
		.io-btn {
			@border-color:  darken(@brand-font-color, 12%);
			background: none;
			color: @brand-font-color;
			border-color: @border-color;
			&:first-child {
				border-left-color: @border-color;
			}
			i {
				font-size: 16px;
				vertical-align: middle;
				margin-right: 5px;
				position: relative;
				bottom: 2px;
			}
			padding: 0 10px !important;
			&:active {
				background: @primary-color;
				color: white;
				border-color: @primary-color;
			}
		}
	}

	&__active {
		color: @brand-success;
	}

	&__control-button {
		margin: 0 10px;
		cursor: pointer;
		font-size: 16px;
		display: inline-block;
		user-select: none;
		vertical-align: middle;
		text-align: center;
		&.icon-btn {
			>i {
				margin-bottom: 20px;
				font-size: 23px;
			}
		}
		&:hover[class^="io-btn"] {
			color: @brand-primary;
		}
	}

	&__steps {
		text-align: center;
		position: absolute; 
		left: 50%; 
		margin-left: -309px;
		top: 4px;
	}

	&-sub {
		@bar-height: 48px;
		height: @bar-height;
		line-height: @bar-height;
		border-top: solid 1px @brand-background-color-d3;
		.context-bar__spliter {
			height: @bar-height;
			top: -4px;
		}
	}

	&__crumbs {
		margin-left: 20px;
		font-size: 13px;
		.go-back {
			margin-right: .5em;
			cursor: pointer;
			font-size: 20px;
			position: relative;
			top: 2px;
		}
		.splitter {
			position: relative;
			bottom: 1px;
		}
		.current {
			color: white;
		}
	}
}


@media (max-width: 1200px) {

}

